<template>
  <a-space>
    <span @click="Favour()">
      <a-space :style="formMessage.hasFavour ? { color: '#DEAE11' } : {}">
        <star-filled></star-filled>
        {{ formMessage.favourNum }}
      </a-space>
    </span>
    <span @click="doPostThumb()">
      <a-space :style="formMessage.hasThumb ? { color: '#e84141' } : {}">
        <LikeFilled />
        {{ formMessage.thumbNum }}
      </a-space>
    </span>
    <span @click="Wait()">
      <Message-filled></Message-filled>
      0
    </span>

<!--    {{postId}}-->
  </a-space>
</template>

<script setup lang="ts">
import {
  LikeFilled,
  MessageFilled,
  StarFilled,
} from "@ant-design/icons-vue";
import { defineProps, onBeforeMount, ref, withDefaults } from "vue";
import { message } from "ant-design-vue";
import myAxios from "@/plugins/myAxios";
import { useRoute } from "vue-router";

interface Props {
  postId: string;
}
const props = withDefaults(defineProps<Props>(), {
  postId: ''
})

let formMessage = ref({
  id: 0,
  thumbNum: 0,
  favourNum: 0,
  hasThumb: false,
  hasFavour: false,
});
let isLogin = false;
const Favour = () => {
  if (!isLogin) {
    message.info("登录获取更多权限");
    return;
  }
  doPostFavour();
};

const Wait = () => {
  message.info("功能待开发");
};

const doPostFavour = async () => {
  const Message = {
    postId: props.postId,
  };
  await myAxios.post(`/post_favour/`, Message).then((res: any) => {
    getPostById();
    if (res == null)
      message.error("系统错误")
    else
    message.success(res == -1 ? "取消收藏" : "收藏成功");
  });
};
const doPostThumb = async () => {
  const Message = {
    postId: props.postId,
  };
  await myAxios.post(`/post_thumb/`, Message).then((res: any) => {
    getPostById();
    if (res == null)
      message.error("系统错误")
    else
      message.success(res == -1 ? "取消点赞" : "点赞成功");
  });
};

const route = useRoute();

let user = ref({
  id: "",
  userName: "",
  userAvatar: "",
  userProfile: "",
  userRole: "",
  createTime: "",
  updateTime: "",
});
const getLoginUser = async () => {
  await myAxios.get("user/get/login").then((res: any) => {
    if (res !== null) {
      user.value = res;
      localStorage.setItem("isLogin", "true");
      localStorage.setItem("id", res.id);
      localStorage.setItem("userRole", res.userRole);
      isLogin = true;
    } else {
      user.value.id = "";
      localStorage.removeItem("isLogin");
      localStorage.removeItem("id");
      localStorage.removeItem("userRole");
      isLogin = false;
    }
  });
};

const getPostById = async () => {
  await myAxios.get(`/post/get/vo?id=${props.postId}`).then((res: any) => {
    if (res !== null) {
      formMessage.value = res;
    }

  });
};
onBeforeMount(() => {
  getPostById();
  getLoginUser();
});
</script>

<style scoped></style>
